<h1 mat-dialog-title>New ProjectMember</h1>
<form [formGroup]="newMemberForm" (submit)="onSubmit()">
    <div mat-dialog-content>
        <mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>
        <mat-form-field class="full-width-input">
          <mat-label>User Name</mat-label>
          <input matInput #userNameControl formControlName="userName" (input)="onUserNameChanged(userNameControl.value)" required>
          <mat-hint *ngIf="newUser" class="new-user-hint">Creating new user</mat-hint>
          <mat-error *ngIf="isFieldInvalid('userName', 'required')">
            Please inform the UserName
          </mat-error>
          <mat-error *ngIf="isFieldInvalid('userName', 'newEmail')">
            Please input valid email when creating new user
          </mat-error>
        </mat-form-field>
        <mat-form-field class="full-width-input">
          <mat-label>First Name</mat-label>
          <input matInput formControlName="firstName">
        </mat-form-field>
        <mat-form-field class="full-width-input">
          <mat-label>Last Name</mat-label>
          <input matInput formControlName="lastName">
        </mat-form-field>
        <app-external-account-form [form]="newMemberForm"
          [externalAccountIds]="currentUser ? currentUser.externalAccountIds : null" [disableForm]="!newUser"></app-external-account-form>
        <mat-form-field class="full-width-input">
          <mat-select placeholder="Role" formControlName="projectMemberRoleId" required>
            <mat-option *ngFor="let role of projectMemberRoles" [value]="role[0]">
              {{role[1]}}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="isFieldInvalid('projectMemberRoleId', 'required')">
            Please select a role
          </mat-error>
        </mat-form-field>
      </div>
      <div mat-dialog-actions>
          <button mat-button cdkFocusInitial>Save</button>
          <button mat-button [mat-dialog-close]="false">Cancel</button>
      </div>
</form>

